<template>
	<view>
		<scroll-view class="scroll-view" :style="{height:swiperHeight}" scroll-y refresher-background="#338B5B"
			@scroll="pageScroll" @scrolltolower="onreachBottom" upper-threshold="40" @scrolltoupper="scrolltoupper">
			<view class="option-wrap">
				<view class="search-wrap">
					<image src="../../static/icon_loacation.png" mode="widthFix"></image>
					<view class="text" @click="clickCity">
						{{locationCity}}
					</view>
					<view class="flex-1">
						<u-input v-model="keyword" placeholder=" " height="72"></u-input>
					</view>
					<view class="btn" @click="search">
						搜索
					</view>
				</view>
				<!-- 分类标签 -->
				<view class="sticky-wrap">
					<view :class="{sticky:stickyFlag}">
						<scroll-view scroll-x="true" class="badge" @touchmove.stop>
							<view class="item" v-for="item in badgeList" :key="item.id"
								:class="{cur:currentBadge==item.id}" @click="selectBadge(item.id)">
								{{item.name}}
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="title-1">
				常访问的人
			</view>
			<scroll-view scroll-x="true" class="user-list" @touchmove.stop>
				<view class="item" v-for="(item,i) in pvUser" :key="item.id"
					@click="$tools.to('/pages_user/userCenter/otherUserCenter?id=' + item.be_user_id)">
					<view class="wrap">
						<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
						<view class="name line-clamp">
							{{item.nickname.slice(0,5)}}...
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 列表 -->
			<view class="list-1">
				<block v-if="currentBadge==5">
					<view class="item-1" v-for="item in list" :key="item.id" @click="goDetail(item.be_user_id)">
						<u-avatar :src="item.avatar"></u-avatar>
						<view class="ml-32 flex-1">
							<view class="name">
								{{item.nickname}}
							</view>
							<view class="fans">
								粉丝：{{item.fans}}
							</view>
						</view>
						<view class="btn" @click="cancelFollow(item.id,i)">
							{{item.is_follow==1?'互相关注':'已关注'}}
						</view>
					</view>
				</block>
				<u-waterfall v-if="currentBadge!=5" v-model="list" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="item " v-for="(item,i) in leftList" :key="item.id"
							@click="goDetail(item.id)">
							<u-image v-if="item.cover" class="pic" :src="item.cover" mode="widthFix"></u-image>
							<!-- 线路 -->
							<block v-if="item.dateType==2">
								<view class="setting-1">
									<view class="count">
										<image src="../../static/icon-like1.png" mode=""></image>
										<text class="mr-20">{{item.collection_num || 0}}</text>
										<image src="../../static/icon-car1.png" mode=""></image>
										<text>{{item.quote_num || 0}}</text>
									</view>
								</view>
								<view class="flex-between">
									<view class="title line-clamp">
										{{item.title}}
									</view>
								</view>
								<view class="desc">
									{{item.description}}
								</view>
								<view class="flex-between user">
									<view class="price">
										¥{{item.min_price}}-{{item.max_price}}
									</view>
									<view class="flex-between">
										<u-image width="42" height="42" shape="circle" :src="item.user.avatar"
											mode="aspectFill">
										</u-image>
										<view class="name line-clamp">
											{{item.user.nickname}}
										</view>
									</view>
								</view>
							</block>
							<!-- 行程 -->
							<block v-if="item.dateType==3">
								<view class="setting">
									<view class="date">
										{{item.create_time}}
									</view>
									<view class="count">
										<image src="../../static/icon-like.png" mode=""></image>
										<text class="mr-14">{{item.like}}</text>
										<image src="../../static/icon-hate.png" mode=""></image>
										<text>{{item.no_like}}</text>
									</view>
								</view>
								<view class="flex-between relative">
									<view class="type-badge type-badge-1">
										拼
									</view>
									<view class="title line-clamp">
										{{item.title}}
									</view>
									<text class="num">{{item.num}}/{{item.seat}}座</text>
								</view>
								<view class="desc">
									{{item.description}}
								</view>
								<view class="flex-between flex-wrap">
									<view class="price">
										¥{{item.price}}
									</view>
									<view class="flex-between">
										<u-image width="42" height="42" shape="circle" :src="item.avatar"
											mode="aspectFill">
										</u-image>
										<view class="name line-clamp">
											{{item.nickname}}
										</view>
									</view>
								</view>
							</block>
							<!-- 动态 -->
							<block v-if="item.dateType==4">
								<view class="flex-between">
									<view class="title">
										{{item.title}}
									</view>
								</view>
								<view class="flex-between mt-20">
									<view class="flex-between">
										<view class="name">
											{{item.nickname}}
										</view>
									</view>
									<view class="like">
										<image class="icon-34" src="../../static/btn_like.png" mode="widthFix"></image>
										<text class="ml-10">{{item.like_num || 0}}</text>
									</view>
								</view>
							</block>
							<!-- 包车 -->
							<block v-if="item.dateType==6">
								<view class="flex-between relative">
									<view class="type-badge type-badge-3">
										包
									</view>
									<view class="title line-clamp">
										{{item.brand}}{{item.model}}{{item.color}}
									</view>
								</view>
								<view class="desc">
									{{item.number_plate}}
								</view>
								<view class="flex-between">
									<view class="price">
										¥{{item.price}}<text>/天</text>
									</view>
								</view>
							</block>
							<!-- 租车 -->
							<block v-if="item.dateType==7">
								<view class="setting">
									<view class="chuzu-status chuzu-status-1" v-if="item.car_status==1">
										<text>●</text>出租中
									</view>
									<view class="chuzu-status chuzu-status-2" v-if="item.car_status==0">
										<text>●</text>空闲中
									</view>
								</view>
								<view class="flex-between relative">
									<view class="type-badge type-badge-2">
										租
									</view>
									<view class="title line-clamp">
										{{item.address}}
									</view>
								</view>
								<view class="desc flex-between">
									<view>{{item.brand}}{{item.model}}{{item.color}}</view>
									<view>{{item.number_plate}}</view>
								</view>
								<view class="flex-between">
									<view class="primary size-24">
										{{item.rq}}-{{item.zh}}
									</view>
								</view>
							</block>

							<!-- 店铺 -->
							<!-- <block v-if="currentBadge==6">
								<view class="flex-between">
									<view class="title line-clamp">
										{{item.name}}
									</view>
								</view>
								<view class="desc line-clamp-2">
									{{item.introduction}}
								</view>
							</block> -->
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="item " v-for="(item,i) in rightList" :key="item.id"
							@click="goDetail(item.id)">
							<u-image v-if="item.cover" class="pic" :src="item.cover" mode="widthFix"></u-image>
							<!-- 线路 -->
							<block v-if="item.dateType==2">
								<view class="setting-1">
									<view class="count">
										<image src="../../static/icon-like1.png" mode=""></image>
										<text class="mr-20">{{item.collection_num || 0}}</text>
										<image src="../../static/icon-car1.png" mode=""></image>
										<text>{{item.quote_num || 0}}</text>
									</view>
								</view>
								<view class="flex-between">
									<view class="title line-clamp">
										{{item.title}}
									</view>
								</view>
								<view class="desc">
									{{item.description}}
								</view>
								<view class="flex-between user">
									<view class="price">
										¥{{item.min_price}}-{{item.max_price}}
									</view>
									<view class="flex-between">
										<u-image width="42" height="42" shape="circle" :src="item.user.avatar"
											mode="aspectFill">
										</u-image>
										<view class="name line-clamp">
											{{item.user.nickname}}
										</view>
									</view>
								</view>
							</block>
							<!-- 行程 -->
							<block v-if="item.dateType==3">
								<view class="setting">
									<view class="date">
										{{item.create_time}}
									</view>
									<view class="count">
										<image src="../../static/icon-like.png" mode=""></image>
										<text class="mr-14">{{item.like}}</text>
										<image src="../../static/icon-hate.png" mode=""></image>
										<text>{{item.no_like}}</text>
									</view>
								</view>
								<view class="flex-between relative">
									<view class="type-badge type-badge-1">
										拼
									</view>
									<view class="title line-clamp">
										{{item.title}}
									</view>
									<text class="num">{{item.num}}/{{item.seat}}座</text>
								</view>
								<view class="desc">
									{{item.description}}
								</view>
								<view class="flex-between flex-wrap">
									<view class="price">
										¥{{item.price}}
									</view>
									<view class="flex-between">
										<u-image width="42" height="42" shape="circle" :src="item.avatar"
											mode="aspectFill">
										</u-image>
										<view class="name line-clamp">
											{{item.nickname}}
										</view>
									</view>
								</view>
							</block>
							<!-- 动态 -->
							<block v-if="item.dateType==4">
								<view class="flex-between">
									<view class="title">
										{{item.title}}
									</view>
								</view>
								<view class="flex-between mt-20">
									<view class="flex-between">
										<!-- <u-lazy-load :image="item.cover"></u-lazy-load> -->
										<view class="name">
											{{item.nickname}}
										</view>
									</view>
									<view class="like">
										<image class="icon-34" src="../../static/btn_like.png" mode="widthFix"></image>
										<text class="ml-10">{{item.like_num || 0}}</text>
									</view>
								</view>
							</block>
							<!-- 包车 -->
							<block v-if="item.dateType==6">
								<view class="flex-between relative">
									<view class="type-badge type-badge-3">
										包
									</view>
									<view class="title line-clamp">
										{{item.brand}}{{item.model}}{{item.color}}
									</view>
								</view>
								<view class="desc">
									{{item.number_plate}}
								</view>
								<view class="flex-between">
									<view class="price">
										¥{{item.price}}<text>/天</text>
									</view>
								</view>
							</block>
							<!-- 租车 -->
							<block v-if="item.dateType==7">
								<view class="setting">
									<view class="chuzu-status chuzu-status-1" v-if="item.car_status==1">
										<text>●</text>出租中
									</view>
									<view class="chuzu-status chuzu-status-2" v-if="item.car_status==0">
										<text>●</text>空闲中
									</view>
								</view>
								<view class="flex-between relative">
									<view class="type-badge type-badge-2">
										租
									</view>
									<view class="title line-clamp">
										{{item.address}}
									</view>
								</view>
								<view class="desc flex-between">
									<view>{{item.brand}}{{item.model}}{{item.color}}</view>
									<view>{{item.number_plate}}</view>
								</view>
								<view class="flex-between">
									<view class="primary size-24">
										{{item.rq}}-{{item.zh}}
									</view>
								</view>
							</block>
						
							<!-- 店铺 -->
							<!-- <block v-if="currentBadge==6">
								<view class="flex-between">
									<view class="title line-clamp">
										{{item.name}}
									</view>
								</view>
								<view class="desc line-clamp-2">
									{{item.introduction}}
								</view>
							</block> -->
						</view>
					</template>
				</u-waterfall>
				<view class="pb-80">
					<u-loadmore :status="status"></u-loadmore>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "guanzhu",
		data() {
			return {
				badgeList: [
					// {
					// 	name: '猜你喜欢',
					// 	id: 1
					// },
					{
						name: '线路',
						id: 2
					},
					{
						name: '行程',
						id: 3
					},
					{
						name: '动态',
						id: 4
					},
					{
						name: '用户',
						id: 5
					},
					{
						name: '包车',
						id: 6
					},
					{
						name: '租车',
						id: 7
					}

				], //推荐标签分类
				searchHeight: 0,
				stickyFlag: false,
				currentBadge: 2, //当前分类标签下标
				page: 1,
				list: [],
				status: 'loading', //loadmore loading / nomore
				pvUser: [],
				keyword: '',
				triggered: false,
			};
		},
		computed: {
			...mapState({
				locationCity: (state) => state.user.locationCity
			})
		},
		props: {
			swiperHeight: {
				type: [String, Number],
				default: 0
			},
			// searchHeight: {
			// 	type: [String, Number],
			// 	default: 0
			// },
		},
		mounted() {
			this._freshing = false;
			this.homeFollowLine()
			this.homePvUser()
			this.getElInfo()
		},
		methods: {
			clickCity(){
				this.$emit('clickCity')
			},
			homePvUser() {
				this.$api.homePvUser().then(res => {
					if (res.code == 1) {
						this.pvUser = res.data
					}
				})
			},
			async getElInfo() {
				this.$u.getRect('.search-wrap').then(res => {
					this.searchHeight = res.height
				})
				// uni.getSystemInfo({
				// 	success: resu => {
				// 		console.log(resu)
				// 		let query = uni.createSelectorQuery()
				// 		query.select('.swiper').boundingClientRect(); //.swiper是swiper类名，获取当前swiper距离顶部的位置
				// 		query.exec(res => {
				// 			this.swiperHeight = resu.windowHeight - res[0].top - resu
				// 				.statusBarHeight +
				// 				'px'; //屏幕的高度减去当前swiper距离顶部的高度就是剩余屏幕的高度 然后动态赋值给swiper
				// 			console.log('页面的剩余高度', this.swiperHeight);
				// 		});
				// 	},
				// 	fail: res => {}
				// });
				// let header = await this.$u.getRect('.swiper')
				// console.log(header)
				// this
			},
			// 自定义下拉刷新控件被下拉
			onPulling(e) {
				console.log("onpulling", e);
				if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
				// if (this._freshing) return;
				// this._freshing = true;
				// setTimeout(() => {
				// 	this.triggered = false;
				// 	this._freshing = false;
				if (this.$refs.uWaterfall) {
					this.$refs.uWaterfall.clear();
				}
				this.list = []
				this.page = 1
				this.status = 'loading'
				if (this.currentBadge == 2) {
					this.homeFollowLine()
				}
				if (this.currentBadge == 3) {
					this.homeFollowItinerary()
				}
				if (this.currentBadge == 4) {
					this.homeFollowDynamic()
				}
				if (this.currentBadge == 5) {
					console.log('用户')
					this.homeFollowUser()
				}
				if (this.currentBadge == 6) {
					this.homeFollowChartered()
				}
				if (this.currentBadge == 7) {
					this.homeFollowCarRental()
				}
				// }, 500);
			},
			// 自定义下拉刷新被复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.error("onRestore");
			},
			// 自定义下拉刷新被中止
			onAbort() {
				console.error("onAbort");
			},
			scrolltoupper(){
				this.stickyFlag = false
			},
			pageScroll(e) {
				let scrollTop = e.detail.scrollTop
				if (scrollTop > this.searchHeight + 36) {
					this.stickyFlag = true
				} else {
					this.stickyFlag = false
				}
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.status === 'nomore') {
					return
				}
				this.page++
				this.status = 'loading'
				if (this.currentBadge == 2) {
					this.homeFollowLine()
				}
				if (this.currentBadge == 3) {
					this.homeFollowItinerary()
				}
				if (this.currentBadge == 4) {
					this.homeFollowDynamic()
				}
				if (this.currentBadge == 5) {
					console.log('用户')
					this.homeFollowUser()
				}
				if (this.currentBadge == 6) {
					this.homeFollowChartered()
				}
				if (this.currentBadge == 7) {
					this.homeFollowCarRental()
				}
			},
			onpullDownRefresh() {
				this.page = 1
				this.list = []
				this.status = 'loading'
				console.log('触发下拉')
				if (this.$refs.uWaterfall) {
					this.$refs.uWaterfall.clear();
				}

				if (this.currentBadge == 2) {
					this.homeFollowLine()
				}
				if (this.currentBadge == 3) {
					this.homeFollowItinerary()
				}
				if (this.currentBadge == 4) {
					this.homeFollowDynamic()
				}
				if (this.currentBadge == 5) {
					console.log('用户')
					this.homeFollowUser()
				}
				if (this.currentBadge == 6) {
					this.homeFollowChartered()
				}
				if (this.currentBadge == 7) {
					this.homeFollowCarRental()
				}

			},
			search() {
				this.page = 1
				this.list = []
				if (this.$refs.uWaterfall) {
					this.$refs.uWaterfall.clear();
				}
				this.status = 'loading'

				if (this.currentBadge == 2) {
					this.homeFollowLine()
				}
				if (this.currentBadge == 3) {
					this.homeFollowItinerary()
				}
				if (this.currentBadge == 4) {
					this.homeFollowDynamic()
				}
				if (this.currentBadge == 5) {
					console.log('用户')
					this.homeFollowUser()
				}
				if (this.currentBadge == 6) {
					this.homeFollowChartered()
				}
				if (this.currentBadge == 7) {
					this.homeFollowCarRental()
				}

			},
			// 选择标签
			selectBadge(e) {
				this.currentBadge = e
				this.page = 1
				this.list = []
				this.status = 'loading'
				// 清楚瀑布流
				if (this.$refs.uWaterfall) {
					this.$refs.uWaterfall.clear();
				}
				// if (this.currentBadge == 1) {
				// 		this.homeFollowLine()	
				// }
				if (this.currentBadge == 2) {
					this.homeFollowLine()
				}
				if (this.currentBadge == 3) {
					this.homeFollowItinerary()
				}
				if (this.currentBadge == 4) {
					this.homeFollowDynamic()
				}
				if (this.currentBadge == 5) {
					this.homeFollowUser()
				}
				if (this.currentBadge == 6) {
					this.homeFollowChartered()
				}
				if (this.currentBadge == 7) {
					this.homeFollowCarRental()
				}
			},
			// 线路列表
			homeFollowLine() {
				this.$api.homeFollowLine({
					page: this.page,
					keyword: this.keyword
				}).then(res => {
					if (res.code == 1) {
						if (this.page === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						let list = res.data.data
						list.forEach((item, i) => {
							list[i].dateType = 2
						})
						this.list.push(...list)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			// 动态列表
			homeFollowDynamic() {
				this.$api.homeFollowDynamic({
					page: this.page,
					keyword: this.keyword
				}).then(res => {
					if (res.code == 1) {
						if (this.page === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						let list = res.data.data
						list.forEach((item, i) => {
							list[i].dateType = 4
						})
						this.list.push(...list)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			// 租车列表
			homeFollowCarRental() {
				this.$api.homeFollowCarRental({
					page: this.page,
					keyword: this.keyword
				}).then(res => {
					if (res.code == 1) {
						if (this.page === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						let list = res.data.data
						list.forEach((item, i) => {
							list[i].dateType = 7
						})
						this.list.push(...list)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			// 包车列表
			homeFollowChartered() {
				this.$api.homeFollowChartered({
					page: this.page,
					keyword: this.keyword
				}).then(res => {
					if (res.code == 1) {
						if (this.page === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						let list = res.data.data
						list.forEach((item, i) => {
							list[i].dateType = 6
						})
						this.list.push(...list)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			// 行程列表
			homeFollowItinerary() {
				this.$api.homeFollowItinerary({
					page: this.page,
					keyword: this.keyword
				}).then(res => {
					if (res.code == 1) {
						if (this.page === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						let list = res.data.data
						list.forEach((item, i) => {
							list[i].dateType = 3
						})
						this.list.push(...list)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			// 
			homeFollowUser() {
				this.$api.homeFollowUser({
					page: this.page,
					keyword: this.keyword
				}).then(res => {
					if (res.code == 1) {
						if (this.page === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						this.list.push(...res.data.data)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			// 取消关注
			cancelFollow(id, i) {
				uni.showModal({
					title: '提示',
					content: '确定要取消关注吗？',
					success: (res1) => {
						if (res1.confirm) {
							this.$api.cancelFollow({
								follow_id: id
							}).then(res => {
								this.$tools.toast(res.msg)
								if (res.code == 1) {
									this.list.splice(i, 1)
								}
							})
						}
					}
				})
			},
			goDetail(id) {
				let is_auth = uni.getStorageSync('userInfo').is_auth
				if (is_auth != 1 && is_auth != 5) {
					uni.showModal({
						title: '温馨提示',
						content: '您还没有实名认证，点击确定完成认证信息',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages_user/realname_authentication5/realname_authentication5'
								})
							}
						}
					})
					return
				}
				
				if (this.currentBadge == 1) {
					uni.navigateTo({
						url: '/pages_user/myRoadBook/detail?id=' + id
					})
				}
				if (this.currentBadge == 2) {
					uni.navigateTo({
						url: '/pages_user/myRoadBook/detail?id=' + id + '&source=1'
					})
				}
				// 行程
				if (this.currentBadge == 3) {
					uni.navigateTo({
						url: '/pages/journey_detail/journey_detail?id=' + id
					})
				}
				if (this.currentBadge == 4) {
					uni.navigateTo({
						url: '/pages/noteDetail/noteDetail?id=' + id
					})
				}
				if (this.currentBadge == 5) {
					uni.navigateTo({
						url: '/pages_user/userCenter/otherUserCenter?id=' + id
					})
				}
				if (this.currentBadge == 6) {
					uni.navigateTo({
						url: '/pages/charteredDetail/charteredDetail?id=' + id
					})
				}
				if (this.currentBadge == 7) {
					uni.navigateTo({
						url: '/pages/carRentalDetail/carRentalDetail?id=' + id
					})
				}

			},
		}
	}
</script>

<style lang="scss">
	.option-wrap {
		background: #308a57;
		padding: 20upx 30upx 30upx;
	}

	.search-wrap {
		background: url(https://longzhiyue-1255795789.cos.ap-shanghai.myqcloud.com/uploads/20221008/69527e06102d98f0767d9ab5ca8fb3c2.png) no-repeat;
		height: 72upx;
		background-size: 100% 100%;
		@include flex;

		image {
			width: 34upx;
			margin: 0 10upx 0 20upx;
		}

		.text {
			font-size: 28upx;
			color: #318B59;
			margin-right: 10upx;
		}

		.btn {
			width: 120upx;
			height: 60upx;
			background: #318A59;
			box-shadow: 0px 3upx 6upx rgba(49, 138, 89, 0.2);
			border-radius: 32upx;
			margin-right: 6upx;
			font-size: 30upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 60upx;
		}
	}

	.scroll-view {
		width: 100%;
	}

	.sticky-wrap {
		height: 46px;
	}

	.sticky {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		padding: 0 30upx;
		z-index: 10000;
		background: #308a57;
	}

	.placeholder {
		height: 30upx;
		background: #308a57;
	}

	.title-1 {
		font-size: 32upx;
		font-weight: bold;
		color: #999999;
		padding: 30upx 30upx 26upx;
		border-radius: 30upx 30upx 0 0;
		margin-top: -30upx;
		background: #fff;
	}

	.user-list {
		white-space: nowrap;
		padding: 0 20upx;
		border-bottom: 16upx solid #f5f5f5;
		background: #fff;

		.wrap {
			@include flex-col;
			align-items: center;
		}

		.item {
			width: 142upx;
			text-align: center;
			display: inline-block;
			padding-bottom: 30upx;

			.avatar {
				width: 80upx;
				height: 80upx;
				min-height: 80upx;
				border: 1upx solid #519D76;
				border-radius: 50%;
			}

			.name {
				text-align: center;
				width: 120upx;
				white-space: pre-wrap;
			}
		}
	}

	.badge {
		white-space: nowrap;
		padding: 12px 0 20upx;

		.item {
			display: inline-block;
			line-height: 22px;
			background: rgba(255, 255, 255, .2);
			border-radius: 22upx;
			padding: 0 14upx;
			min-width: 90upx;
			text-align: center;
			font-size: 24upx;
			color: rgba(255, 255, 255, .5);
			// margin: 24upx 14upx 40upx 0;
			margin-right: 14upx;
		}

		.item.cur {
			color: #318A58;
			background: #fff;
		}
	}

	.list-1 {
		// @include flex-between;
		// align-items: flex-start;
		// flex-wrap: wrap;
		padding: 30upx;
		margin-top: -30upx;
		background: #fff;
		border-radius: 30upx 30upx 0 0;

		.item-1 {
			@include flex-between;
			padding: 30upx 0;

			.avatar {
				width: 88upx;
				height: 88upx;
				background: #FFFFFF;
				border: 1upx solid #707070;
				border-radius: 50%;
			}

			.name {
				font-size: 32upx;
				font-weight: 500;
				color: #333333;
			}

			.fans {
				font-size: 24upx;
				color: #999999;
			}

			.btn {
				font-size: 28upx;
				color: #333333;
				width: 150upx;
				line-height: 62upx;
				height: 62upx;
				border: 1px solid #999999;
				border-radius: 8upx;
				text-align: center;
			}
		}

		.item {
			width: 335upx;
			border-radius: 16upx;
			position: relative;
			margin-bottom: 35upx;

			.setting {
				position: absolute;
				left: 0;
				top: 0;
				padding: 10upx;
				@include flex-between;
				width: 100%;

				.date {
					line-height: 40upx;
					background: rgba(255, 142, 28, .8);
					font-size: 20upx;
					color: #FFFFFF;
					padding: 0 12upx;
					border-radius: 4upx;
				}

				.chuzu-status {
					width: 125upx;
					line-height: 48upx;
					text-align: center;
					border-radius: 16upx 0px 16upx 0px;
					font-size: 26upx;
					color: #FFFFFF;

					text {
						font-size: 20upx;
						font-weight: 400;
					}

					&-1 {
						background: #FF8E1C;
					}

					&-2 {
						background: #519D76;
					}
				}

				.count {
					line-height: 40upx;
					background: rgba(49, 138, 88, 1);
					font-size: 20upx;
					color: #FFFFFF;
					border-radius: 4upx;
					padding: 0 12upx;
					@include flex-between;

					image {
						width: 24upx;
						height: 24upx;
						margin-right: 4upx;
					}

				}


			}

			.pic {
				width: 335upx;
			}

			.title {
				font-size: 28upx;
				font-weight: bold;
				color: #333333;
			}

			.num {
				font-size: 20upx;
				font-weight: 400;
				color: #FF8E1C;
				line-height: 30upx;
				background: #FFFFFF;
				border: 2upx solid #FF8E1C;
				border-radius: 17upx;
				padding: 0 10upx;
				white-space: nowrap;
			}

			.desc {
				font-size: 24upx;
				color: #999999;
				margin: 8upx 0 18upx;
				line-height: 1.6;
				flex-wrap: wrap;
			}

			.user {
				flex-wrap: wrap;
			}

			.price {
				font-size: 42upx;
				font-weight: bold;
				color: #328B5A;

				text {
					font-size: 24upx;
					font-weight: 400;
					color: #333;
				}
			}

			.avatar {
				width: 42upx;
				height: 42upx;
				border-radius: 50%;
			}

			.name {
				font-size: 24upx;
				color: #333333;
				margin-left: 10upx;
			}
		}
	}


	.setting-1 {
		position: absolute;
		left: 0;
		top: 0;
		padding: 10upx;
		@include flex-end;
		width: 100%;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.4000) 0%, rgba(0, 0, 0, 0) 100%);

		.date {
			line-height: 40upx;
			background: rgba(255, 142, 28, .8);
			font-size: 20upx;
			color: #FFFFFF;
			padding: 0 12upx;
			border-radius: 4upx;
		}

		.count {
			line-height: 40upx;
			font-size: 26upx;
			color: #FFFFFF;
			border-radius: 4upx;
			padding: 0 12upx;
			@include flex;

			image {
				width: 40upx;
				height: 40upx;
				margin-right: 4upx;
			}
		}
	}
	
	.relative{
		position: relative;
	}
	.type-badge {
		padding: 10upx;
		line-height: 1;
		border-radius: 6upx;
		color: #fff;
		position: absolute;
		top: -60upx;
		right: 10upx;
		z-index: 60;
		font-size: 26upx;
	}
	.type-badge-1 {
		background: rgba(50, 139, 90,.7);
	}
	.type-badge-2 {
		background: rgba(80, 133, 249,.7);
	}
	.type-badge-3 {
		background: rgba(256, 142, 28,.7);
	}
</style>
